<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <!-- 引入vue -->
  <script src="../vue.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <!-- v-cloak指令，会在计算过程中给dom添加v-cloak属性 -->
  <div id="app" v-cloak>
    <!-- container:布局容器 -->
    <div class="container">
      <h2 class="text-center text-primary">信息输入</h2>
      <form>
        <div class="form-group">
          <label for="name">姓名</label>
          <input v-model="info.name" type="text" class="form-control" id="name" placeholder="name">
        </div>
        <div class="form-group">
          <label for="phone">手机号</label>
          <input v-model="info.phone" type="text" class="form-control" id="phone" placeholder="phone">
        </div>
        <div class="form-group">
          <label for="remark">备注信息</label>
          <input v-model="info.remark" type="text" class="form-control" id="remark" placeholder="remark">
        </div>
        <button type="button" @click="add" class="btn btn-info">添加</button>
        <button type="button" @click="reset" class="btn btn-danger">重置</button>
      </form>
      <h2 class="text-center text-primary">信息展示</h2>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>姓名</th>
            <th>手机号</th>
            <th>备注信息</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in studentList" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.phone}}</td>
            <td>{{item.remark}}</td>
            <td>
              <button @click="del(index)" class="btn btn-danger">删除</button>
            </td>
          </tr>
          <tr>
            <td v-show="studentList.length == 0" colspan="4">暂无数据</td>
            <td v-show="studentList.length > 0" colspan="4">
              <button @click="delAll" class="btn btn-danger">全部删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        // 学生信息
        info: {
          name: '',
          phone: '',
          remark: ''
        },
        // 学生列表
        studentList: JSON.parse(localStorage.getItem('studentList')) || []
      },
      methods: {
        add() {
          // 添加到数组中
          this.studentList.push(this.info);
          // 清空输入框
          this.reset();
          // 保存到本地存储中
          localStorage.setItem('studentList', JSON.stringify(this.studentList))
          // 删除某一项
          // localStorage.removeItem('studentList')
        },
        reset() {
          // 重置
          this.info = {
            name: '',
            phone: '',
            remark: ''
          }
        },
        del(index) {
          // 删除某一项
          this.studentList.splice(index, 1);
          // 保存到本地存储中
          localStorage.setItem('studentList', JSON.stringify(this.studentList))
        },
        delAll() {
          // 全部删除
          this.studentList = [];
          // 保存到本地存储中
          localStorage.removeItem('studentList');
        }
      },
    })
  </script>
</body>

</html>